<template>
  <!-- 已有事务列表 组件 -->
  <section class="eventList">
    <ul>
      <template v-if='props.currentEventData.length'>
        <li v-for="item in props.currentEventData" :key='item._id'>
          <!-- 选择 -->
          <div class="chioceDot" @click='toggleStatus(item._id)'>
          <!-- <div class="chioceDot" @click='$emit("toggleEventStatus",item._id)'> -->
            <div v-if="item.done"  :class="{doneDot:item.done}"></div>
          </div>
          <!-- 事件列表 -->
          <div class="eventContent">
            <span :class="{doneLine:item.done}">{{item.context}}</span>
          </div>
          <div class="del" :data-id=item._id @click="deleteF($event)">❌</div>
        </li>
      </template>
      <template v-else>
        <li class="noDataTip">
          No Data
        </li>
      </template>
    </ul>
  </section>
</template>

<script setup>
import { reactive, computed } from 'vue'
import JSS from '@/utils/JSONTool.js'
import {deleteEvent} from '@/utils/dataBaseTool.js'
import {toggleEventStatus} from '@/utils/dataBaseTool.js'


let props = defineProps({
  currentEventData:{
    type:Array,
    default:()=>[]
  }
})
let emit = defineEmits(['upudateOrginEventData'])

function deleteF(e){
  // console.log(e)
  deleteEvent(e.target.dataset.id)
  //新增后更新  
  emit('upudateOrginEventData')
}

function toggleStatus(_id) {
  toggleEventStatus(_id)
  //新增后更新
  emit('upudateOrginEventData')
}
</script>

<style scoped>
  .eventList{
    padding: .1rem 0;
    font-size: .25rem;
    max-height: 300px;
    overflow: auto;
  }
  .eventList div{
    margin-right:.2rem;
  }  
  .eventList li{
    margin: .1rem 0;
    padding: .1rem .2rem;
    background-color: #999;
    border-radius: .35rem;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-items: center;
  }
  .chioceDot{
    width: .4rem;
    height: .4rem;

    border: 1px solid #fff;
    border-radius: 100%;
    position: relative;
  }
  .doneDot{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    width: .3rem;
    height: .3rem;

    border-radius: 100%;
    background-color: tomato;
  }
  .eventContent{
    flex: 1;
  }
  .doneLine{
    text-decoration: line-through;
  }
  .del{
    margin-right: 0 !important;
    text-align: right;
    opacity: 0.6;
  }
  .del:hover{
    opacity: 1;
  }
  .noDataTip{
    justify-content: center !important;
    color: rgba(255, 255, 255, .75);
  }
</style>
